<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on 的基本使用</title>
</head>
<body>
<div id="app">
    <h1>{{ counter }}</h1>
    <div>直接修改数据</div>
    <button v-on:click="counter--">-</button>
    <button v-on:click="counter++">+</button>

    <br>
    <div>在函数中修改</div>
    <button v-on:click="decrease">-</button>
    <button v-on:click="increase">+</button>

</div>
<script type="module">
    import {createApp, ref} from "../../../../../js/vue.esm-browser.js";

    const app = createApp({
        setup() {
            // counter 直接赋值的话，不是响应式，无法修改
            // let counter = 0
            let counter = ref(0)

            console.log(counter);

            function increase() {
                counter.value = counter.value + 1
            }

            function decrease() {
                if (counter.value > 0) {
                    counter.value = counter.value - 1
                }

            }

            return {
                counter,
                decrease,
                increase,
            }

        }
    })
    app.mount("#app")
</script>
</body>
</html>